<template>
  <div class="top-nav">
    <mt-navbar v-model="selected">
      <mt-tab-item v-for="(nav, index) in barList" :id="nav.num" :key="index" class="navbar" @click.native="routerTo(nav.pathName)">
        <div slot="icon" class="icons" :class="nav.iconClass" v-if="nav.iconClass"></div>
        <mt-badge slot="icon" type="error" size="small" class="custom-badge" v-if="nav.badgeShow"></mt-badge>
        {{nav.title}}
      </mt-tab-item>
    </mt-navbar>
  </div>
</template>

<script>
  import MyBillCard from '@/container/card/MyBillCard'
  import MyFeeCard from '@/container/card/MyFeeCard'
  import BankFilter from '@/container/card/BankFilter'

  export default {
    name: 'NavBar',
    props: ['barList', 'showContainer'],
    components: {
      MyBillCard,
      MyFeeCard,
      BankFilter
    },
    data () {
      return {
        selected: '1',
        popupVisible: false
      }
    },
    methods: {
      routerTo (pathName) {
        if (pathName === undefined) {
          return false
        }
        if (pathName === 'loading') {
          this.$post('/vue/coupon_customer/cooperation').then(data => {
            if (data === 'yes') {
              this.$router.push({name: 'CooperationList'})
            } else {
              this.$router.push({name: 'Cooperation'})
            }
          })
        } else {
          this.$router.push({name: pathName})
        }
      }
    }
  }
</script>

<style lang="less">
  @c-blue: rgb(108, 184, 222);

  .top-nav {
    .mint-navbar {
      color: @c-blue;
      font-size: 12px;
      background-color: #FFF;
      .mint-tab-item {
        &.is-selected {
          border-bottom: inherit;
          color: inherit;
          margin-bottom: inherit;
        }
        .mint-tab-item-icon {
          width: 40px;
          height: 40px;
          margin-bottom: 4px;
          position: relative;
          .icons {
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
          .nav-broadcast {
            background-image: url('/src/assets/nav/nav-broadcast.png');
          }
          .nav-cooperation {
            background-image: url('/src/assets/nav/nav-cooperation.png');
          }
          .nav-qa {
            background-image: url('/src/assets/nav/nav-qa.png');
          }
          .mint-badge {
            &.custom-badge {
              width: 12px;
              height: 12px;
              border-radius: 100%;
              padding: 0;
              position: absolute;
              right: 0;
              top: 0;
            }
          }
        }
      }
    }
  }
</style>